import React, {useEffect, useRef, useState} from "react";
import {connect} from "react-redux";
import {getUserList} from '@/api/userList'

import {Row, Col, Form, Input, Button, Table} from 'antd';
import {SearchOutlined, EditOutlined} from '@ant-design/icons';
import './userList.less';

import PopFrom from './form.js'

const {Column} = Table;

//请求数据
const GetList = (data, setData) => {
    getUserList(data).then(res => {
        if (res.code === 200) {
            setData(res.data)
        }
    })
}

const UserList = (props, user) => {

    const [data, setData] = useState({});
    const cRef = useRef(null)

    useEffect(() => {
        GetList({}, setData)
    }, [])

    const PageChange = (e) => {
        console.log(e)
        GetList(e, setData)
    }

    const onFinish = (value) => {
        GetList(value,setData)
    }
    const edit = (id) => {
        cRef.current.open(id)
    }




    return (
        <div className='page'>
            <div className='serch'>
                <Form
                    name="basic"
                    labelCol={{span: 4}}
                    wrapperCol={{span: 16}}
                    initialValues={{username: null}}
                    onFinish={onFinish}
                >
                    <Row>
                        <Col span={6}>
                            <Form.Item
                                label="用户名"
                                name="username"
                            >
                                <Input/>
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            {/*icon={<DownloadOutlined />}*/}
                            <Button type="primary" icon={<SearchOutlined/>} size='mini' htmlType="submit">搜索</Button>
                        </Col>
                    </Row>
                </Form>
            </div>
            <div className='table'>
                <Table dataSource={data.data} bordered pagination={{total: data.total}} onChange={(e) => PageChange(e)}
                       rowKey={(record) => record.id}
                       size="small">

                    <Column title="id" dataIndex="id" align={'center'}/>
                    <Column title="用户名称" dataIndex="userName" align={'center'}/>
                    <Column title="文章数量" dataIndex="user_article_count"  align={'center'}/>
                    <Column title="文章点赞数" dataIndex="user_like_count"  align={'center'}/>
                    <Column title="操作"dataIndex="id"   align={'center'} render={id => (
                        <>
                            <Button type="ghost" icon={<EditOutlined/>} size='mini' onClick={() => {
                                edit(id)
                            }}>编辑</Button>
                        </>
                    )}/>
                </Table>
            </div>
            <PopFrom  ref={cRef} />
        </div>
    )
}

export default connect(state => state)(UserList)